<template>
	<div class="all">
		<!-- <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="80%"
            custom-class="customClass36"
            :close-on-click-modal="false"
            :destroy-on-close="true"
            :show-close="false"
        >
            <div slot="title" class="disFlex j-c">
                <div class="disFlexItem">
                    <div class="textHeader-36 m-r-60">预警：202房间</div>
                    <div class="textHeader-28 m-r-60" @click="switchClick(1)">
                        <span> 群消息关联：</span>
                        <img
                            src="../assets/img/logxin.png"
                            alt=""
                            class="m-l-20"
                            srcset=""
                        />
                    </div>
                    <div class="textHeader-28" @click="switchClick(2)">
                        <span>紧急联系：</span>
                        <img
                            src="../assets/img/logphone.png"
                            alt=""
                            class="m-r-20 p-r-log"
                            srcset=""
                        />
                        <img
                            src="../assets/img/logSP.png"
                            alt=""
                            srcset=""
                        />
                    </div>
                </div>

                <div class="colose" @click="dialogVisible = fa">X</div>
            </div>
            <div class="disFlex hieght-100">
                <div class="width-300">
                    <div class="userItem">客户: 朱佳琪</div>
                    <div class="userItem">电话: 18169350250</div>
                    <div class="userItem">套餐: C套餐_JA</div>
                    <div class="userItem">进度: 21/28</div>
                    <div class="userItem">护理: 李莉莉</div>
                    <div class="userItem">负责人: 张祥生</div>
                </div>
       
                <div class="width-100">
             
                    <information
                        v-if="showHide.xinxi"
                        :numValue="numValue"
                        :hederTit="hederTit"
                        @switchCancel="switchCancel"
                        @switchData="switchData"
                    />
                     <videoCall
                        :arrData="videoCall"
                        @switchCancel="switchCancel"
                        v-if="showHide.videoCall"
                    />
                </div>
            </div>
        </el-dialog> -->
		<div class="roomAll" v-if="diaologStatus">
			<div class="tops">
				<div class="tops-all">
					<div class="tops-rooms" v-if="objectList.contractType == 8">住家中</div>

					<template v-else>
						<div class="tops-rooms" v-if="objectList.contractId != 0 && objectList.roomId == 0">已离所</div>
						<div class="tops-rooms" v-if="objectList.contractId == 0">未签约</div>

						<div class="tops-rooms" v-if="objectList.contractId != 0 && objectList.roomId != 0">{{ objectList.orgName }} {{ objectList.roomNo }}房间</div>
					</template>

					<div class="tops-qk">
						<div class="border-all" @click="nameAll(index)" v-for="(item, index) in list" :key="item.id" :class="activesIndex == index ? colorList[activesIndex] : ''">
							{{ item.name }}

							<img class="iconList" :src="imglist[index]" alt="" />
						</div>

						<div class="border-all" @click="updataList()">
							<!-- span-alls -->
							点击确认处理:
							<span :class="showChuli ? 'span-alls ' : 'span-all'">{{ showChuli ? '当前未处理' : '已处理' }}</span>
						</div>
					</div>
				</div>
				<!-- this.dataObjReal -->
				<div class="colose" @click="dialogVisibles()">X</div>
			</div>

			<div class="center-all">
				<div class="left">
					<div class="name-all">客户：{{ objectList.psnlName }}</div>
					<div class="name-all">手机号：{{ objectList.psnlPhone ? objectList.psnlPhone : '暂无' }}</div>
					<div class="name-all">专护师：{{ objectList.specialName ? objectList.specialName : '暂无' }}</div>
				</div>
				<div class="right">
					<div class="rightYj" v-if="activesIndex == 0">
						<!-- <vue-seamless-scroll
              :data="listAryL"
              class="wp-1 hp-1"
              :class-option="classOptions"
            > -->
						<div class="name-all name-alls" v-for="(item, index) in listAryL" :key="item.id">
							<div class="lhl-mar">{{ item.date | filterDateTime }}</div>

							<div
								:class="{
									'orange-s': item.level == 1,
									'red-s': item.level >= 3,
									'yellow-s': item.level == 2
								}"
								class="lhl-mar"
							>
								{{ item.source | filterType }}预警
							</div>

							<span class="lhl-mar">{{ item.remark }}</span>
							<!-- <div v-if='index ==0'>
            <span>2023-08-02 16:31</span>
              <span   style="color: rgb(245, 154, 35)">考勤打卡预警</span>
              <span>发现专护师李四当天未打卡</span>
           </div>
           <div v-if='index ==1'>
            <span>2023-08-02 16:31</span>
              <span   style="color: rgb(245, 154, 35)">考勤打卡预警</span>
              <span>发现专护师李四当天未打卡</span>
           </div> -->
						</div>
						<!-- </vue-seamless-scroll> -->

						<div class="zanwu" v-if="listAryL.length == 0">暂无数据</div>
					</div>

					<information
						class="rights"
						v-if="showHide.xinxi && activesIndex == 1"
						:numValue="numValue"
						:hederTit="hederTit"
						:messageLists="messageLists"
						@switchCancel="switchCancel"
						@switchData="switchData"
					/>

					<div v-if="activesIndex == 2">
						<div class="zanwu">正在开发中...</div>
					</div>
					<div v-if="activesIndex == 3">
						<div class="zanwu">正在开发中...</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import information from './information.vue';
import SocketService from '../sokect/index';
import videoCall from './videoCall.vue';
import vueSeamlessScroll from 'vue-seamless-scroll';
import { getroomChatList, getwarning, PostupdateStatus, getRoomCust, findMessageList } from '../src/api/rights';
// import { mapState } from 'vuex';
export default {
	props: ['diaologStatus'],
	components: { information, videoCall, vueSeamlessScroll },

	computed: {
		// 使用 mapState 函数将 state 中的数据映射到组件的计算属性中
		// ...mapState(['realTime']),
		classOptions() {
			return {
				step: 0.6, // 数值越大速度滚动越快
				limitMoveNum: this.listAryL.length, // 开始无缝滚动的数据量 this.dataList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 0, // 0向下 1向上 2向左 3向右
				openWatch: true, // 开启数据实时监控刷新dom

				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				singleHeight: 0,
				waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
			};
		}
	},

	data() {
		return {
			socketService: null,
			message: '',
			wxChatId: '',
			colorList: ['actives', 'actives1', 'actives1', 'actives1'],
			imglist: [require('../assets/img/yj.png'), require('../assets/img/xinxi.png'), require('../assets/img/dianhua.png'), require('../assets/img/shiping.png')],
			activesIndex: 0,
			listAryL: [],
			list: [
				{
					id: 1,
					name: '预警情况'
				},
				{
					id: 2,
					name: '群消息关联'
				},
				{
					id: 3,
					name: '电话联系'
				},
				{
					id: 4,
					name: '视频连接'
				}
			],
			showHide: {
				xinxi: false,
				videoCall: false
			},
			numValue: null, //切换模式展示不同内容
			hederTit: '',
			videoCall: [],
			showChuli: true,
			objectList: {},
			userLists: [],
			messageLists: [],
			classOptions: {},
			dataObjReal: {}
			// qunList: [],
		};
	},
	// watch(){
	//  	this.dataObjReal.custId:{

	// 	}
	// },
	mounted() {
		this.dataObjReal = {};
		this.dataObjReal = this.$store.state.realTime;
		console.log('this.dataObjReal', this.dataObjReal);
		// if (this.dataObjReal?.status == 1) {
		// 	this.showChuli = true;
		// } else {
		// 	this.showChuli = false;
		// }
		console.log('this.dataObjReal', this.dataObjReal.custId);
		if (this.dataObjReal.custId) {
			this.getwarnings();
			this.getroomChatLists();
			this.getRoomCusts();
			setTimeout(() => {
				this.findMessageLists();
			}, 200);
		}
	},
	created() {
		// this.connectToWebSocket();
	},
	methods: {
		// connectToWebSocket() {
		//   this.socketService = new SocketService(
		//     "ws://47.97.107.54:8089/dashboard/websocket/warning-all"
		//     // "http://japi.care-bay.com:8089/dashboard/websocket/warning-all"
		//   );
		//   this.socketService.connect();
		//   this.socketService.on("message", (data) => {
		//     this.message = data; // 更新接收到的消息
		//   });
		// },
		// 获取群消息
		async findMessageLists() {
			let datas = {
				wxRoomId: this.$store.state.qunList[0].wxChatId,
				roomId: this.$store.state.qunList[0].id
			};

			let data = await findMessageList(datas);
			if (data.data.code == 200) {
				this.userLists = data.data.data.userList;
				this.messageLists = data.data.data.messageList;
				this.messageLists = this.messageLists.map((message) => {
					const wxUserId = message.fromUser;
					const user = this.userLists.find((user) => user.wxUserId === wxUserId);
					let content = null;

					try {
						// 解析content字段的JSON字符串
						content = JSON.parse(JSON.stringify(message.content));
						// console.log("content", content);
					} catch (error) {
						// JSON解析失败，可能content不是一个合法的JSON字符串，可以根据需求进行错误处理
						console.error('Failed to parse JSON:', error);
					}

					if (user) {
						// 找到对应的用户信息时，添加到message对象中并返回
						return {
							...message,
							wxUserId: wxUserId,
							name: user.name,
							avatar: user.avatar,
							content: content // 添加解析后的content字段
						};
					} else {
						// 如果找不到对应的用户信息，保留原始message对象
						return message;
					}
				});
				// this.$store.commit("smessageLists", this.messageLists);

				this.cheXin(this.messageLists);
			}
		},
		cheXin(arr) {
			let arr1 = [];
			for (var i = 0; i < arr.length; i++) {
				if (JSON.parse(arr[i].content).type == 'revoke') {
					arr1.push(arr[i]);
				}
			}
			this.newPush(arr1);
		},
		// 全新啊
		newPush(arr1) {
			arr1.forEach((item) => {
				const pre_msgid = JSON.parse(item.content).pre_msgid;
				const matchingItem = this.messageLists.find((item2) => item2.msgId === pre_msgid);
				if (matchingItem) {
					item.content = JSON.stringify({
						type: 'revoke',
						pre_msgid,
						...matchingItem
					});
				}
			});
		},
		// 获取客户信息
		async getRoomCusts() {
			let datas = {
				date: this.getCurrentFormattedDate(this.dataObjReal.date),
				custId: this.dataObjReal.custId
			};
			let data = await getRoomCust(datas);
			if (data.data.code == 200) {
				this.objectList = data.data.data;
			}
		},
		// 获取群聊
		async getroomChatLists() {
			let datas = {
				custId: this.dataObjReal.custId
			};
			let data = await getroomChatList(datas);
			// console.log("darta", data);
			if (data.data.code == 200) {
				// this.qunList = data.data.data;
				this.$store.commit('savequnList', data.data.data);
				let datafalse = this.$store.state.qunList[0].state;
				this.datafalse = datafalse == 1;
				console.log('datadata', data);
			}
		},
		async updataList() {
			if (!this.showChuli) return;
			let datas = {
				custId: this.dataObjReal.custId
			};

			let data = await PostupdateStatus(datas);
			// console.log("darta", data);
			if (data.data.code == 200) {
				this.showChuli = false;
				this.$message({
					message: data.data.msg,
					type: 'success'
				});
				this.$emit('brush');
				// 当前的信息清空
				// this.listAryL = []
				this.listAryL = this.$options.data().listAryL;
			}
		},
		async getwarnings() {
			console.log('getwarnings', this.dataObjReal.custId);
			let datas = {
				custId: this.dataObjReal.custId,
				status: 1
			};
			let data = await getwarning(datas);
			if (data.data.code == 200) {
				this.listAryL = data.data.data.list;
				this.$nextTick(() => {
					if (this.listAryL.length == 0) {
						this.showChuli = false;
					}
				});
				console.log('showChuli', this.showChuli);
				// data.data.data.list.forEach((item) => {
				//   if (item.status == 2) {
				//     this.showChuli = true;
				//   }
				// });
			}
		},
		getCurrentFormattedDate(data) {
			const currentDate = new Date(data);
			const year = currentDate.getFullYear().toString(); // 获取年份后两位
			const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并补0
			const day = currentDate.getDate().toString().padStart(2, '0'); // 获取日期并补0

			return `${year}-${month}-${day}`;
		},

		nameAll(index) {
			this.activesIndex = index;
			if (index == 1) {
				this.numValue = 1;
				this.showHide.xinxi = true;
				this.hederTit = this.$store.state.qunList.length == 0 ? '暂无数据' : this.$store.state.qunList[0].name;
			}

			this.getwarnings();
			this.getroomChatLists();
			this.findMessageLists();
		},

		switchCancel(v) {
			this.showHide = {
				xinxi: false,
				videoCall: false
			};
		},
		dialogVisibles() {
			this.dataObjReal = {};
			this.dialogVisible = false;
		},
		// 接受数据
		switchData(data) {
			this.showHide.videoCall = true;
			this.videoCall = data;
		}
	},

	computed: {
		dialogVisible: {
			get() {
				return this.diaologStatus;
			},
			set(v) {
				console.log(v, '----');
				this.$emit('diaologCencel', v);
			}
		}
	}
};
</script>
<style scoped>
.all {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	z-index: 222;
	background: rgba(163, 163, 163, 0.3);
}
.roomAll {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	z-index: 223;
	margin: 0 auto;
	background: rgb(3, 21, 69);
	height: 60%;
	color: #fff;
	padding: 8px;
	box-sizing: border-box;
}
.tops {
	width: 100%;
	border: 1px solid rgb(121, 121, 121);
	/* padding: 8px; */
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
.tops-rooms {
	width: 20%;
	font-weight: bold;
	font-size: 20px;
	margin: 20px 0px 20px 5px;
	/*1.如果文字显示不开也必须一行内显示*/
	white-space: normal;
	padding: 5px;
	box-sizing: border-box;
	/*2.溢出的部分隐藏起来*/
	/* overflow: hidden; */
	/*3.文字溢出的时候用省略号来显示*/
	/* text-overflow: ellipsis; */
}
.tops-qk {
	width: 76%;
	display: flex;

	margin-right: 32px;
}
.border-all {
	border: 1px solid rgb(121, 121, 121);
	border-radius: 20px;
	padding: 4px 14px 4px 14px;
	margin-right: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.colose {
	color: black;
	background-color: #fff;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
}
.left {
	width: 15%;
	height: 84%;
	border: 1px solid rgb(121, 121, 121);
	padding: 5px;
}
.name-all {
	margin: 20px 0px 20px 5px;
}

.center-all {
	display: flex;
	/* align-items: center; */
	justify-content: space-between;
	height: 96%;
	margin-top: 10px;
}
.right {
	width: 82%;
	height: 84%;
	border: 1px solid rgb(121, 121, 121);
	padding: 5px;
	/* overflow: hidden; */
	overflow-y: scroll;
}

.rights {
	height: 100%;
	overflow: auto;
}

.name-alls {
	margin-left: 20px;
	border-bottom: 1px solid rgb(51, 51, 51);
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 20px;
	display: flex;
}
.actives {
	background-color: red;
}
.actives1 {
	background-color: rgb(2, 167, 240);
}
.tops-all {
	width: 79%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.iconList {
	width: 20px;
	height: 20px;
	margin-left: 8px;
}
.span-all {
	background-color: rgb(2, 167, 240);
	border-radius: 8px;
	margin-left: 8px;
	padding: 0px 8px 0 8px;
	color: black;
}
.span-alls {
	background-color: rgb(215, 215, 215);
	border-radius: 8px;
	margin-left: 8px;
	padding: 0px 8px 0 8px;
	color: black;
}
.span-alls {
	background-color: rgb(215, 215, 215);
	border-radius: 8px;
	margin-left: 8px;
	padding: 0px 8px 0 8px;
	color: black;
}
.zanwu {
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: center;
	color: #ccc;
}
.lhl-mar {
	display: flex;

	margin-right: 10px;
}
.red-s {
	color: red;
}
.orange-s {
	color: orange;
}

.yellow-s {
	color: yellow;
}
</style>
